<template>
    <div class="home">
        <StateBar></StateBar>
        <TitleHeader title="拓店云" bgColor="transparent" :back="true" />

        <AutoView :header="true" :footer="false" class="home--view">
            <van-skeleton :loading="loading" title :animate="false" :row="2">
                <EmptyCard v-if="list.length === 0" type="default" />
                <template v-else>内容</template>
            </van-skeleton>
        </AutoView>

        <!-- 全局加载遮罩 -->
        <LoadingOverlay :show="loading" />
    </div>
</template>

<script>
export default {
    name: 'home',
    data() {
        return {
            loading: true,
            list: []
        };
    },
    methods: {
        loadData() {
            setTimeout(() => {
                this.loading = false;
            }, 1000);
        }
    },
    beforeMount() {
        this.JSBridge.callHandler('switchNavbar', false);
        this.JSBridge.callHandler('switchImmersiveNavBar', true);
    },
    mounted() {
        this.loadData();
    }
};
</script>

<style lang="scss" scoped>
.home {
    height: 100vh;
    background-color: #f7f6f9;

    #{&}--view {
        padding: 0 12px;
    }
}
</style>
